<template>
  <view class="info-container">
    <!-- Avatar -->
    <view class="avatar-section">
      <view class="avatar-wrapper">
        <image class="avatar" :src="userInfo.avatar || '/static/images/avatar.png'" mode="aspectFill"></image>
        <view class="camera-icon" v-if="isEditing" @click="uploadAvatar">
          <text class="iconfont icon-camera"></text>
        </view>
      </view>
    </view>
    
    <!-- Info Fields -->
    <view class="info-list">
      <view class="info-item" @click="isEditing && editField('nickname')">
        <view class="item-label">名字</view>
        <view class="item-value">
          <text>{{userInfo.nickname || '-'}}</text>
          <text class="iconfont icon-right" v-if="isEditing"></text>
        </view>
      </view>
            
      <view class="info-item" @click="isEditing && editField('sex')">
        <view class="item-label">性别</view>
        <view class="item-value">
          <text>{{userInfo.sex === 1 ? '男' : '女' || '-'}}</text>
          <text class="iconfont icon-right" v-if="isEditing"></text>
        </view>
      </view>
      
      <view class="info-item" @click="isEditing && editField('birthday')">
        <view class="item-label">出生年月</view>
        <view class="item-value">
          <text>{{userInfo.birthday || '-'}}</text>
          <text class="iconfont icon-right" v-if="isEditing"></text>
        </view>
      </view>
      
      <view class="info-item" @click="isEditing && editField('location')">
        <view class="item-label">地区</view>
        <view class="item-value">
          <text>{{userInfo.location || '-'}}</text>
          <text class="iconfont icon-right" v-if="isEditing"></text>
        </view>
      </view>
      <view class="info-item" @click="isEditing && editField('communityName')">
        <view class="item-label">社区名称</view>
        <view class="item-value">
          <text>{{userInfo.communityName || '-'}}</text>
          <text class="iconfont icon-right" v-if="isEditing"></text>
        </view>
      </view>
      
      <view class="info-item" @click="isEditing && editField('bgUrl')">
        <view class="item-label">背景图</view>
        <view class="item-value">
          <image class="bg-thumbnail" :src="userInfo.bgUrl || '/static/images/bg-thumbnail.jpg'" mode="aspectFill"></image>
          <text class="iconfont icon-right" v-if="isEditing"></text>
        </view>
      </view>
      <view class="info-item">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
        <button class="edit-btn" v-if="!isEditing" @click="startEdit">编辑</button>
        <button class="confirm-btn" v-if="isEditing" @click="confirmEdit">确认修改</button>
      </view>
    </view>
  </view>
</template>

<script>
import { updateUserInfo, uploadFile } from '@/api/api.js';

export default {
  data() {
    return {
      isEditing: false,
      userInfo: {
        nickname: '',
        sex: '',
        birthday: '',
        location: '',
        avatar: '',
        bgUrl: '',
        communityName: ''
      },
      editComplete: false
    }
  },
  onShow() {
    // 从缓存获取用户信息
    this.getUserInfoFromCache();
    
    // 检查是否从编辑页面返回，如果是则重置编辑状态
    if (this.editComplete) {
      this.isEditing = false;
      this.editComplete = false;
    }
  },
  methods: {
    uploadAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          uploadFile(tempFilePath).then(res => {
            this.userInfo.avatar = res.data;
          });
        }
      });
    },
    // 从缓存获取用户信息
    getUserInfoFromCache() {
      const cachedUserInfo = uni.getStorageSync('userInfo');
      if (cachedUserInfo) {
        this.userInfo = cachedUserInfo;
      }
    },
    startEdit() {
      this.isEditing = true;
    },
    confirmEdit() {
      console.log(this.userInfo);
      // 处理保存数据的逻辑
      updateUserInfo(this.userInfo).then(res => {
        // 更新缓存
        uni.setStorageSync('userInfo', this.userInfo);
        this.isEditing = false;
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
      }).catch(err => {
        console.error('更新用户信息失败:', err);
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        });
      });
    },
    editField(field) {
      if (!this.isEditing) return;
      
      uni.navigateTo({
        url: `/pages/mine/editField?field=${field}&value=${this.userInfo[field] || ''}`
      });
    },
    handleLogout() {
      // 清除缓存和存储的认证信息
      uni.removeStorageSync('token');
      uni.removeStorageSync('userInfo');
      uni.removeStorageSync('us_oid');
      
      // 跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style scoped>
.info-container {
  min-height: 100vh;
  background-color: #ffffff;
  color: #000000;
}

.back-icon {
  position: absolute;
  left: 16px;
}

.avatar-section {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

.avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
}

.camera-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-list {
  padding: 0 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.item-label {
  color: #666;
  font-size: 16px;
}

.item-value {
  display: flex;
  align-items: center;
}

.bg-thumbnail {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  margin-right: 8px;
}

.icon-right {
  color: #999;
  margin-left: 8px;
}

.logout-btn {
  background-color: #f44336;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  margin-right: 10px;
}

.edit-btn, .confirm-btn {
  background-color: #2196f3;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
}
</style>
